Widget Subscribe memang penting bagi sebuah blog untuk menjadi alat interaksi antara pengunjung dengan blog itu sendiri. Sehingga ketika blog tersebut mengupdate atau menpublish posting terbaru otomatis mengirim pemberitahuaan ke email pengunjung yang sebelumnya mensubscribe. Begitu juga pada tombol share memiliki peran yang tidak kalah penting yaitu ketika pengujung tertarik atau suka dan ingin berbagi postingan anda tinggal klik tombol share otomatis langsung terbagi di media sosial baik facebook maupun twitter.
Nah pada tutorial kali ini cornertricks akan membagikan
Cara Membuat Subscribe Box dan Social Share Button di Bawah Postingan, dengan begitu ketika pengunjung menyukai postingan anda atau ingin berlangganan postingan anda cukup mudah dilihat setelah membaca postingan blog anda. Tampilan
Widget Subscribe Box dan Social Share Button nya juga elegent sehingga membuat pengunjung tertarik hehe
Langsung saja ke tutorial
Cara Membuat Subscribe Box dan Social Share Button di Bawah Postingan.
Mari ikuti langkah berikut ini:
1. Login ke Blogger > Klik Theme > Pilih Edit HTML >
Tambahkan kode di bawah ini, sebelum
]]></b:skin> atau
</style>
.kotakbawah .kotakbawah-form{float: left;
position: relative;
width: 56%;}
.kotakbawah .kotakbawah-form fieldset {height:38px;left:10%;position:absolute;width:80%;border:none}
.kotakbawah .kotakbawah-form fieldset h2{color:#FFF;font-family:Open Sans, sans-serif;font-weight:300; width:100%;margin:0 0 1.5625em;font-size:16px;}
.kotakbawah .kotakbawah-form fieldset .fields{position:relative}
.fields .email{ font-family: Open Sans, sans-serif;border-radius:10px 0 0 10px;outline:0 none;width:84%;border:0;left:0;position:absolute;padding:10.5px}
.fields .subscribe{background:none repeat scroll 0 0 #F0553B;border:medium none;border-radius:0 10px 10px 0;color:#FFF;right:0;position:absolute;padding:12px;transition:all ease 0.6s;}
.fields .subscribe:hover {background: none repeat scroll 0 0 rgba(38, 172, 205, 1);}
.kotakbawah{text-align:center;margin:0px 0 0;}
.kotakbawah .social.facebook{background:none repeat scroll 0 0 #3661A0;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.21);
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;}
.kotakbawah .social{padding-top:20%;width:22%;float:left;position:relative; height:95px;}
.kotakbawah #form-kotakbawah{display:block;width:100%;margin:0 auto}
.kotakbawah:before,.kotakbawah:after{content:" ";display:table}
.kotakbawah:after{clear:both}
.kotakbawah h2{color:#3B434D;font-family:Open Sans,sans-serif;font-size:1.5em;font-weight:300;width:65%;margin:0 auto}
.kotakbawah .social.twitter{background:none repeat scroll 0 0 #00ACED; box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.25);
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;}
.kotakbawah .social img{display:block;left:30%;position:absolute;top:20%;width:40%}
.kotakbawah .social a img{max-width:100%;width:100%;transition: transform 0.3s ease-out 0s}
.kotakbawah .social .social-box{bottom:10%;left:10%;right:10%; position:absolute}
.kotakbawah .social .social-box.fb-like{margin-left:}
.kotakbawah .social .social-box.twitter-follow-button{margin-left:0px}
.kotakbawah .kotakbawah-form{float: left;
position: relative;
width: 56%;}
.kotakbawah .kotakbawah-form fieldset{height:38px;left:10%;position:absolute;width:80%;border:none}
.kotakbawah .kotakbawah-form fieldset h2{color:#FFF;font-family:Open Sans, sans-serif;font-weight:300;width:100%;margin:0 0 1.5625em;font-size:16px;}
.kotakbawah .kotakbawah-form fieldset .fields{position:relative}
.fields .email{ font-family: Open Sans, sans-serif;border-radius:10px 0 0 10px;outline:0 none;width:84%;border:0;left:0;position:absolute;padding:10.5px}
.fields .subscribe{background:none repeat scroll 0 0 #F0553B;border:medium none;border-radius:0 10px 10px 0;color:#FFF;right:0;position:absolute;padding:12px;transition:all ease 0.6s;}
.fields .subscribe:hover {background: none repeat scroll 0 0 rgba(38, 172, 205, 1);}
.h6-subs {
height: 50px;
width: 100%;
font-size: 18px;
background: #0F98D5;
color: white;
border-radius: 3px 3px 0 0;
box-shadow: 0 2px 5px 1px rgba(0, 0, 0, 0.2);
text-align: center;
font-weight: 500;
}
.subform {height: auto;
box-sizing: border-box;
width: 100%;
box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.2);
padding-bottom: 0px;
border-radius: 2px;
margin: 0 2%;
}
.subform .h6-subs {
box-sizing: border-box;
padding: 13px 0;
}
.subtext {margin-top: 15px;
font-size: 15px;}
.subform.subtext { font-size: 14px;
font-weight: 300;
text-align: center;
margin-top: 12px;}
.subinput { margin: 5px 25px 15px;
width: 300px;
display: inline-block;
border: none;
padding: 20px 0 10px;
border-bottom: solid 1px #03A9F4;
-webkit-transition: all 0.3s cubic-bezier(0.64, 0.09, 0.08, 1);
transition: all 0.3s cubic-bezier(0.64, 0.09, 0.08, 1);
background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 96%, #03A9F4 4%);
background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 96%, #03A9F4 4%);
background-position: -300px 0;
background-size: 300px 100%;
background-repeat: no-repeat;
color: #106288; transition: all 0.3s ease-out;
}
.subinput:focus, input:valid {
box-shadow: none;
outline: none;
background-position: 0 0;
}
.subinput:focus::-webkit-input-placeholder, input:valid::-webkit-input-placeholder {
color: #A9B1C6;
font-size: 11px;
-webkit-transform: translateY(-20px);
transform: translateY(-20px);
visibility: visible !important;
visibility: visible;
transition: all 0.1s ease;
}
buttons {
background: #FFFFFF;
-moz-border-radius: 19px;
-webkit-border-radius: 19px;
border-radius: 19px;
padding: 15px 35px;
color: #5a5a5a; margin-top:25px;
box-shadow: rgba(0, 0, 0, 0.117647) 0px 1px 6px, rgba(0, 0, 0, 0.239216) 0px 1px 4px;
transition: all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;border: none; cursor: pointer;
border-radius: 3px;font-size: 13px;text-align: center;font-weight: 500;
font-family: 'Roboto', sans-serif;
text-transform: uppercase;
}
buttons:hover {
background: rgba(0, 0, 0, 0.5); color:#fff;
}
input:focus::-webkit-input-placeholder, input:valid::-webkit-input-placeholder {
color: #1abc9c;
font-size: 11px;
-webkit-transform: translateY(-20px);
transform: translateY(-20px);
visibility: visible !important;
}
@media screen and (max-width: 820px)
{
.kotakbawah .social {
padding-top: 36%!important;
width: 50%!important;
float: left;
position: relative; margin-bottom: 13px;
}
.kotakbawah .kotakbawah-form {
float: left;
position: relative;
width: 97%!important;
}
.kotakbawah .social a {top: 17%!important;}
.kotakbawah .social a img {max-width: 100%!important; width: 50%!important;}
.kotakbawah-form .subinput {width: 80%!important;}
}
2. Selanjutnya tambahkan kode di bawah ini, di bawah
<data:post.body/> (yang kedua)
<div class="kotakbawah">
<div id="form-kotakbawah">
<div class="social facebook">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9Po1zbSSm-3JlcEK-4WeZeD49gj-Ym4eDDxqkbSdtmE7nhWO87NL_pkpvKJevzQRucI1YWpyKj3y6o8gOnW9kXzG2QjHKlg9ilQzPkKBg8SZnN-gAyy-b71adDXfqzPXZ5KKMDvFaTFh7/s1600/nl-facebook@2x.png" />
<buttons class="social-box fb-like" expr:href=""http://www.facebook.com/sharer.php?u=" + data:blog.url" onclick="window.open(this.href,"popupwindow","status=0,height=500,width=500,resizable=0,top=50,left=100");return false;" rel="nofollow" scrolling="no" target="_blank" title="Facebook">Share
</buttons>
</div>
<div class="social twitter">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2MQ4aNLVXJrQUACQkMouNfcADAbXi4ZGvWPvS65U1EL_JQFrAkpZGt00cMalc7j5eKfF3xG-QmH5wB2iMHBik2r4Rkf9KAA-KSwFDRG1RhB-nH2bi9b9N9RcBsYtvOEjSOWs1QYqC-LCL/s1600/nl-twitter@2x.png" />
<buttons class="social-box twitter-follow-button twitter-follow-button" expr:href=""http://www.blogger.com/share-post.g?blogID=" + data:blog.blogId + "&amp;postID="+ data:post.id + "&amp;target=twitter"" onclick="window.open(this.href,"popupwindow","status=0,height=500,width=500,resizable=0,top=50,left=100");return false;" rel="nofollow" target="_blank" title="Twitter">Share
</buttons>
</div>
<div class="kotakbawah-form">
<form action="https://feedburner.google.com/fb/a/mailverify" class="subform" method="post" onsubmit="window.open('https://feedburner.google.com/fb/a/mailverify?uri=CORNERTRICKS', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<h6 class="h6-subs">
Subscribe Now</h6>
<div class="subtext">
Get Latest Posts Directly Into You Inbox</div>
<input class="subinput" name="email" placeholder="Enter Your Email" required="" type="text" />
<input class="subinput" name="uri" type="hidden" value="CORNERTRICKS" /><input name="loc" type="hidden" value="en_US" /><buttons class="btn-bounce" type="submit" value="Subscribe">Submit</buttons>
</form>
</div>
</div>
</div>
*Catatan
Ganti url CORNERTRICKS dengan url anda
3. Simpan template.
Demikian tutorial cara membuat subscribe box dan tombol social share. Selamat mencoba dan semoga bermanfaat.
![[CornerTricks] - Blogging Tutorial | Widget | SEO | Template | Artikel](https://sites.google.com/site/cornertriks/img/cornertricks.png?attredirects=0)
Posting Komentar